<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>小喇叭开始广播啦</title>
    <script src="/sockjs.min.js"></script>
    <script src="/stomp.min.js"></script>
    <script src="/jquery.min.js"></script>

</head>
<body onload="disconnect()">
<button id="connect" onclick="connect()" disabled="disabled">连接</button>
<button id="disconnect" onclick="disconnect()" disabled="disabled">连接断开</button>
<div id="inputDiv">
    输入名称:<input type="text" id="name"><br>
    <button id="sendName" onclick="sendName()">发送</button><br>
    <p id="response"></p>
</div>
<script>
    var stompClient = null;
    function connect(){
        var socket =new SockJS("/endpointWisely");
        stompClient=Stomp.over(socket);
        stompClient.connect({},function(frame){
            setConnected(true);
            console.log("connected:"+frame);
            stompClient.subscribe("/topic/getResponse",function(response){

                console.log(response);
                console.log(response.body);
                showResponse(JSON.parse(response.body).responseMsg);
            })
        })

    }
    function setConnected(connect) {
        debugger
        $("#connect").attr("disabled",connect);
        $("#disconnect").attr("disabled",!connect);
        if(!connect){
            $("#inputDiv").hide();
        }else{
            $("#inputDiv").show();
        }
        $("#response").html("");


    }
    function showResponse(responseMsg) {

        $("#response").html(responseMsg);
    }

    function disconnect(){
        if(stompClient!=null){
            stompClient.disconnect();
        }
        setConnected(false);
        console.log("disconnected");
    }

    function sendName(){
        var name=$("#name").val();
        stompClient.send("/welcome",{},JSON.stringify({'name':name}));
    }

</script>
</body>
</html>
